// 入口函数
$(function () {
    // 1.文章分类渲染
    let layer = layui.layer;
    let form = layui.form;
    initCate();
    function initCate() {
        $.ajax({
            url: '/my/article/cates',
            success: function (res) {
                // console.log(res);
                // 状态判断
                if (res.status != 0) {
                    return layer.msg(res.message);
                }
                // 成功后渲染
                let str = template('tpl-cate', res);
                // console.log(str);
                $("[name=cate_id]").html(str);
                // 解决bug
                form.render();
            }
        })
    }

    // 2.初始化富文本编辑器
    initEditor();

    // 3.渲染文章封面裁剪区域
    // 3.1. 初始化图片裁剪器
    var $image = $('#image')
    // 3.2. 裁剪选项
    var options = {
        aspectRatio: 400 / 280,
        preview: '.img-preview'
    }
    // 3.3. 初始化裁剪区域
    $image.cropper(options)

    // 4.选择图片
    $("#btnChooseImage").on('click', function () {
        $("#coverFile").click();
    })

    // 5.渲染图片
    $("#coverFile").on('change', function (e) {
        // 拿到文件
        let file = e.target.files[0]
        // 非空校验
        if (file == undefined) {
            return;
        }
        // 根据文件生成路径
        let newImgURL = URL.createObjectURL(file)
        // 先销毁，在渲染
        $image
            .cropper('destroy')      // 销毁旧的裁剪区域
            .attr('src', newImgURL)  // 重新设置图片路径
            .cropper(options)        // 重新初始化裁剪区域
    })

    // 6.收集状态
    let state = '';
    $('#btnSave1').on('click', function () {
        state = '已发布';
    })
    $('#btnSave2').on('click', function () {
        state = '草稿';
    })

    // 7.文章发布
    $("#form-pub").on('submit', function (e) {
        // 阻止默认提交
        e.preventDefault();
        // 先凑齐 FormData 对象参数 -
        //   因为文件上传必须使用 FormData对象
        let fd = new FormData(this);
        // 向 fd 中添加状态 state
        fd.append('state', state);
        $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
                width: 400,
                height: 280
            }).toBlob(function (blob) {       // 将 Canvas 画布上的内容，转化为文件对象
                // 得到文件对象后，进行后续的操作
                // 添加最后一个属性，二进制文件
                fd.append('cover_img', blob);
                // console.log(...fd);
                // ！！！ 发布文章的ajax一定要写道 toBlob() 回调函数里面
                articlePublish(fd);
            });
    });

    // 封装发布文章函数
    function articlePublish(fd){
        $.ajax({
            method: 'POST',
            url: '/my/article/add',
            data: fd,
            // 上传文件，两个false
            contentType: false,
            processData: false,
            success: function (res) {
                // 状态校验
                if (res.status != 0) {
                    return layer.msg(res.message);
                }
                // 成功后给提示
                layer.msg('恭喜您，发布文章成功！');
                // location.href = '/article/art_list.html'
                // 跳转到文章列表页
                setTimeout(function () {
                    window.parent.document.getElementById('art_list').click();
                }, 2000);
            }
        })
    }
});